import React, { useState } from 'react';
import ReactDOM from 'react-dom/client';

// 如何正确的使用memo 优化代码 提供性能
export default function App() {
    return (
        <ColorPicker>
            <ExpensiveTree />
        </ColorPicker>
    );
}
function ColorPicker({ children }) {
    let [color, setColor] = useState('red');
    return (
        <div style={{ color }}>
            <input value={color} onChange={(e) => setColor(e.target.value)} />
            <p style={{ color }}>Hello, world!</p>
            {children}
        </div>
    );
}
function ExpensiveTree() {
    let now = performance.now();
    // 耗时的渲染（尽量减少重复渲染）
    while (performance.now() - now < 100) {
        // Artificial delay -- do nothing for 100ms
    }
    console.log('执行了');
    return <p>这是一个渲染非常耗时的组件</p>;
}

// let ExpensiveTree = memo(() => {
//     let now = performance.now();
//     while (performance.now() - now < 100) {
//         // Artificial delay -- do nothing for 100ms
//     }
//     console.log('执行了');
//     return <p>I am a very slow component tree.</p>;
// });

// function Form() {
//     let [color, setColor] = useState('red');
//     return (
//         <>
//             <input value={color} onChange={(e) => setColor(e.target.value)} />
//             <p style={{ color }}>Hello Word</p>
//         </>
//     );
// }

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <React.StrictMode>
        <App />
    </React.StrictMode>
);
